<template>
    <div id="kind-root">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">分类</div>
            <router-link to="/user/search" class="fa fa-search"></router-link>
            <div id="ww">···</div>
        </div>
        <div class="kind-main">
            <div class="kind-main-left" ref="bigdiv">
                <div v-for="(b,i) in bigkind" @click="kindClick($event,b)" @touchstart="touchClick" @touchmove="categoryMove" @touchend="categorEnd"
                    :class="{black:text==b}">
                    {{b}}
                </div>
            </div>
            <div class="kind-main-right" ref="kindmain">
                <div class="kinditem-root" v-if="isshow">
                    <div class="kinditem-main">
                        <div v-for="s in smallkind" class="kinditem-main-item">
                            <!--<router-link to="">-->
                            <p style="color:black" @touchstart="ctn($event)">{{s}}</p>
                            <!--</router-link>-->
                        </div>
                    </div>
                </div>
                <div id="shang" v-if="!isshow">
                    <div id="timu">{{str}}</div>
                    <div id="neirong">
                        <div v-for="g in good" class="xiaotu">
                            <router-link :to="'/user/find/gooddetail/'+g._id">
                                <img :src="'/avatar/'+g.pics[0]" alt="">
                                <p>{{g.name}}</p>
                                <p>￥{{g.price}}</p>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        data: function () {
            return {
                bigtext: '电子',
                // 拖动的距离
                dis: '',
                // 大div的高
                top: '',
                //最大拖动距离
                maxDis: '',
                bigkind: [],
                smallkind: [],
                isshow: true,
                good: [],
                str: "",
                text: "电子"
            }
        },
        methods: {
            ctn: function (e) {
                this.isshow = false;
                this.str = e.target.innerText;
                // console.log(e.target.innerText)
                var param = {
                    str: e.target.innerText
                }
                this.$store.dispatch("requestGood", param)
                    .then(res => {
                        // console.log(res.data.data1)
                        this.good = res.data.data1;
                    });
            },
            back: function () {
                history.back();
            },
            touchClick: function (e) {
                this.top = this.$refs.bigdiv.offsetTop - 44;
                this.dis = e.touches[0].clientY;
            },
            kindClick: function (e, b) {
                this.text = e.target.innerText;
                // console.log(e.target.innerText)
                this.isshow = true;
                this.bigtext = b;
                // console.log(e.target.innerText);
                this.$refs.bigdiv.classList.add("transtion");
                this.top = this.$refs.bigdiv.offsetTop - 44;
                this.maxDis = this.$refs.bigdiv.scrollHeight - this.$refs.bigdiv.clientHeight;

                if (e.target.offsetTop <= this.maxDis) {
                    this.$refs.bigdiv.style.top = -e.target.offsetTop + "px";
                } else {
                    if (this.maxDis + this.top < e.target.offsetTop + this.top) {
                        this.$refs.bigdiv.style.top = -this.maxDis + "px";
                    }
                }

                this.$refs.kindmain.style.opacity = 0;
                // this.$store.commit("setKindName",e.target.innerHTML);
                var param = {
                    bigkind: e.target.innerText
                }
                // console.log(param)
                setTimeout(() => {
                    this.$store.dispatch("requestBigKindItem", param)
                        .then(res => {
                            // console.log(res.data.data1)
                            this.smallkind = res.data.data1;
                        });
                    this.$refs.kindmain.style.opacity = 1;
                }, 400);
            },

            categoryMove: function (e) {
                var box = this.$refs.bigdiv;
                box.classList.remove("transtion");
                // console.dir(ul.classList[0]=='');
                var moveDis = e.touches[0].clientY - this.dis;
                box.style.top = moveDis + this.top + "px";
                // console.log(moveDis);
            },
            categorEnd: function (e) {
                //最大拖动距离等于元素内容高度-元素高度
                this.$refs.bigdiv.classList.add("transtion");
                this.maxDis = this.$refs.bigdiv.scrollHeight - this.$refs.bigdiv.clientHeight;
                this.top = this.$refs.bigdiv.offsetTop - 44;
                if (this.top > 0) {
                    this.$refs.bigdiv.style.top = 0;
                }
                if (this.top < -this.maxDis) {
                    this.$refs.bigdiv.style.top = -this.maxDis + "px";
                }
                // console.log(this.top)
            }

        },
        mounted: function () {
            this.$store.dispatch("requestFenlei")
                .then(res => {
                    // console.dir(res.data)
                    this.bigkind = res.data.data1;
                });
            var param = {
                bigkind: this.bigtext
            }
            this.$store.dispatch("requestBigKindItem", param)
                .then(res => {
                    // console.log(res.data.data1)
                    this.smallkind = res.data.data1;
                });
        }
    }

</script>

<style scoped>
    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
    }

    #qq a {
        font-size: 25px;
        margin-top: 12px;
        margin-right: 5px;
        color: #bbb;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    .kind-root {
        width: 100%;
        height: 90vh;
        background-color: #fefefe;
    }

    .header {
        padding: 2px 5px;
        width: 100vw;
        height: 44px;
        background-color: #7D9CB2;
        z-index: 30;
    }

    .header h1 {
        margin: 0;
        margin-left: 25vw;
        font-size: 18px;
        display: inline-block;
        position: relative;
        top: -16px;
        color: white;
    }

    .kind-main {
        height: 90vh;
        display: flex;
        overflow: hidden;
    }

    .kind-main-left {
        position: relative;
        width: 23vw;
        flex-shrink: 0;
        font-size: 14px;
        /*overflow: hidden;*/
        height: 100%;
    }

    .kind-main-left>div {
        cursor: pointer;
        width: 100%;
        text-align: center;
        padding: 15px 12px;
        border-bottom: 1px solid #eee;
    }

    .kind-main-right {
        height: 90vh;
        padding: 10px 5px;
        padding-top: 7px;
        padding-left: 8px;
        flex-grow: 1;
        background-color: #eee;
        opacity: 1;
        transition: all 0.4s;
    }

    .transtion {
        transition: top 0.7s;
    }

    .bigitem {
        color: #ee0000;
        background-color: #eee;
    }

    .kinditem-main {
        width: 100%;
        background-color: #fefefe;
        margin-top: 5px;
        margin-bottom: 20px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .kinditem-main-item {
        padding: 10px;
        /*padding-top: 0;*/
        padding-bottom: 5px;
        width: 33.33%;
        text-align: center;
    }

    .kinditem-main-item p {
        cursor: pointer;
        font-size: 12px;
    }

    #timu {
        width: 80vw;
        text-align: center;
        margin: 7px 0px;
        color: #999;
    }

    #neirong {
        display: flex;
    }

    .xiaotu {
        display: inline-block;
        width: 36vw;
        height: 50vw;
        /*border: solid 1px black;*/
        background-color: white;
        text-align: center;
        margin-right: 5px;
    }

    .xiaotu img {
        width: 35vw;
        height: 35vw;
    }

    .xiaotu p {
        margin: 0;
        text-align: left;
        margin-left: 5px;
    }

    .xiaotu p:nth-of-type(1) {
        color: #999;
    }

    .xiaotu p:nth-of-type(2) {
        color: red;
        font-size: 14px;
    }

    .black {
        color: red;
    }
</style>